<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>BI Component - Orgnization Heirarchy</title>
    <link rel="Stylesheet" type="text/css" href="../../css/common/bi_app_style.css" />
    <link rel="Stylesheet" type="text/css" href="../../<%=theme%>/css/theme_style_ie7.css" />
    <!--[if IE 8]><link rel="stylesheet" type="text/css" href="../../theme/css/style-ie8.css" /><![endif]-->
    <!--[if IE 9]><link rel="stylesheet" type="text/css" href="../../theme/css/style-ie9.css" /><![endif]-->
    <link rel="Stylesheet" type="text/css" href="../../api/js/skin-vista/ui.dynatree.css" />

    <script type="text/JavaScript" src="../../api/js/jquery-1.8.3.js"></script>
    <script type="text/JavaScript" src="../../api/js/jquery-ui-1.9.2.custom.js"></script>
    <script type="text/javascript" src="../../api/js/jquery.cookie.js"></script>
    <script type="text/JavaScript" src="../../<%=theme%>/script/jquery.easing.1.3.js"></script>
    <script type="text/JavaScript" src="../../<%=theme%>/script/custom.js"></script>
    <script type="text/javascript" src="../../api/js/jquery.dynatree.js"></script>
    <script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>

    <!-- [REQUIRED] SCRIPT FOR INTEGRATION WITH BOI -->
    <script type="text/javascript">
        var BOI = parent.BOI; //REQUIRED
        var periodVal = undefined;
        var properties = { //REQUIRED
            varname: "",
            height: "50%"
        };
        window.onload = function () {
            BOI.Events.addListener(BOI.Events.period_change, function (args) { //args[0] is the rep id
                periodVal = args[0];
                load();
            });
            //sample registeration for an event
            //register listener function for an event
        }

        var initialize = function initialize() {//REQUIRED //initialization function ... see below..
            /*---- begin your component custom initialization code ----*/
            //example to set property values to dom elements
            refreshProperties();
            //load the tree
            load();
        };
        var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
        };
        var refreshProperties = function refreshProperties() { //REQUIRED function to be called by parent when a property change occurs
        };

        var selectedVariable = [];
        // $.ui.dynatree.nodedatadefaults["icon"] = false; // Turn off icons by default
        function report_catalog(data) {
            $(".hierarchy").dynatree({
                initAjax: {
                },
                onCreate: function (node, span) {
                    //2/11/2014 : Ansaj remove the home page report from report catalog
                    if(BOI.remove_home && node.data.key==BOI.home_report){
                        $(span).remove();
                    }
                    $(span).attr("type", node.data.type);
                    $(span).attr("nodeID", node.data.nodeID);
                    $(span).attr("title", node.data.title);
                },
                onActivate: function (node) {
                    switch (node.data.type) {
                        case "M_FOLDER":
                        case "S_FOLDER":
                        case "BW_ROLE":
                            break;
                        case "REPORT_GROUP":
                            BOI.Events.raiseEvent(BOI.Events.groupopen, [node.data.nodeID]);
                            break;
                        default:
                            BOI.Events.raiseEvent(BOI.Events.repopen, [node.data.nodeID]);
                            break;
                    }
                },
                children: data,
                minExpandLevel: 2,
                clickFolderMode: 1,
                checkbox: false,
                selectMode: 1,
                fx: { height: "toggle", duration: 500 }
            });
        }
        $(document).ready(function () {
            load();
            var textbox = $(this);
            $('a.search').click(function () {
                var tree = $('.hierarchy').dynatree("getTree");
                var matches = [];
                var nodeKey = $('.search-box').val().toLowerCase();
                tree.visit(function (node) {
                    node.data.addClass = '';
                    if (node.data.title.toLowerCase().indexOf(nodeKey) > -1) {
                        node.makeVisible();
                        node.data.addClass = 'highlight';
                        matches.push(node);
                    }
                });

                if (node === null) {
                    alert("Not Found");
                }
                if(matches.length>0){
                    var node = matches[0];
                    current_match = 0;
                    var matchLi = node.li;
                    $('.dynatree-container').animate({
                        scrollTop: $(matchLi).offset().top - $('.dynatree-container').offset().top + $('.dynatree-container').scrollTop()
                    }, 'slow');
                    tree.activateKey(node.data.key);
                    textbox.focus();
                }
            });

            $('.dynatree-title').live('click', function(){
                var id = $(this).parent().attr('nodeID');
                var type = $(this).parent().attr('type');
                switch (type) {
                    case "M_FOLDER":
                    case "S_FOLDER":
                    case "BW_ROLE":
                        break;
                    case "REPORT_GROUP":
                        BOI.Events.raiseEvent(BOI.Events.groupopen, [id]);
                        break;
                    default:
                        BOI.Events.raiseEvent(BOI.Events.repopen, [id]);
                        break;
                }
            });
            //Input Value empty
        });
        function getSelectedValues() {
            var selKeys = $('.hierarchy').dynatree("getSelectedNodes");
            for (var i in selKeys) {
                selectedVariable.push(selKeys[i].data.key);
            }
            BOI.Events.raiseEvent(BOI.Events.repopen, [selectedVariable]);
        }
        function load() {
            //TODO: use BOI.app_id instead of hardcoded AC_DB, and set to USER MODE
            //BOI.app_id="TEST_BI_APP";
            BOI.loadReportCatalog(BOI.app_id, 'JSON', function () {
                report_catalog(BOI.context.reportCatalogJSON);
                // "ADMIN" or "USER"
                showHomePage();
            }, "ADMIN");
        }
        function showHomePage(){
            //var rep = BOI.getContextReportByTechname(BOI.home_report);
            BOI.Events.raiseEvent(BOI.Events.app_loaded, [BOI.home_report]);
        }

    </script>
    <style>
        body { overflow:hidden; background:none;}
    </style>
</head>
<body>
<div class="org-menu">
    <div class="org-search">
        <p>
            <label>Report:</label>
            <input class="search-box" value=""  type="text" name="searchKey" />
            <a class="searchBtn">Search</a>
        </p>
    </div>
    <div class="hierarchy">
    </div>
</div>
</body>
</html>
<%
theme = ''.
%>